<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务中心 - UserHub</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入自定义CSS -->
    <link rel="stylesheet" href="tasks.css">
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <!-- 左侧Logo和导航 -->
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <i class="fa fa-connectdevelop text-primary text-2xl mr-2"></i>
                        <span class="font-bold text-xl text-primary">UserHub</span>
                    </div>
                    <nav class="hidden md:ml-10 md:flex md:space-x-8">
                        <a href="dashboard.html" class="text-gray-500 hover:text-primary hover:border-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors duration-200">
                            首页
                        </a>
                        <a href="messages.html" class="text-gray-500 hover:text-primary hover:border-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors duration-200">
                            消息
                        </a>
                        <a href="tasks.html" class="text-primary border-primary inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                            任务
                        </a>
                        <a href="settings-profile.html" class="text-gray-500 hover:text-primary hover:border-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors duration-200">
                            设置
                        </a>
                    </nav>
                </div>
                
                <!-- 右侧用户区域 -->
                <div class="flex items-center">
                    <!-- 搜索按钮 -->
                    <button class="p-2 rounded-full text-gray-500 hover:text-primary hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary mr-2 transition-colors duration-200">
                        <i class="fa fa-search"></i>
                    </button>
                     <!-- 通知按钮 - 修复后 -->
                    <a href="messages.html" class="p-2 rounded-full text-gray-500 hover:text-primary hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary relative mr-2 transition-colors duration-200">
                        <i class="fa fa-bell"></i>
                        <span class="absolute top-1 right-1 block h-2 w-2 rounded-full bg-red-500 ring-2 ring-white"></span>
                    </a>

                    <!-- 用户菜单 - 保持不变 -->
                    <div class="ml-3 relative">
                        <div>
                            <button type="button" class="flex items-center max-w-xs rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" id="user-menu-button">
                                <img class="h-8 w-8 rounded-full object-cover" src="https://picsum.photos/id/64/200/200" alt="用户头像" id="header-avatar">
                                <span class="ml-2 hidden md:block text-sm font-medium text-gray-700" id="user-display-name">张三</span>
                                <i class="fa fa-chevron-down ml-1 text-xs text-gray-500 hidden md:block"></i>
                            </button>
                        </div>
                    </div>
                        
                        <!-- 下拉菜单 (默认隐藏) -->
                        <div class="user-menu-dropdown hidden absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50" id="user-menu-dropdown">
                            <div class="py-1">
                                <button class="user-menu-item w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="window.location.href='settings-profile.html'">
                                    <i class="fa fa-user-circle mr-2"></i>个人资料
                                </button>
                                <button class="user-menu-item w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="window.location.href='settings-security.html'">
                                    <i class="fa fa-lock mr-2"></i>账户安全
                                </button>
                                <button class="user-menu-item w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="window.location.href='settings-notifications.html'">
                                    <i class="fa fa-bell mr-2"></i>通知设置
                                </button>
                                <div class="border-t border-gray-100 my-1"></div>
                                <button class="user-menu-item w-full text-left px-4 py-2 text-sm text-red-500 hover:bg-gray-100" id="logout-button">
                                    <i class="fa fa-sign-out mr-2"></i>退出登录
                                </button>
                            </div>
                        </div>
                    
                    
                    <!-- 移动端菜单按钮 -->
                    <button type="button" class="ml-4 md:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-500 hover:text-primary hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" id="mobile-menu-button">
                        <i class="fa fa-bars"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div class="md:hidden hidden" id="mobile-menu">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a href="dashboard.html" class="text-gray-500 hover:bg-gray-50 hover:text-primary hover:border-primary block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">
                    首页
                </a>
                <a href="messages.html" class="text-gray-500 hover:bg-gray-50 hover:text-primary hover:border-primary block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">
                    消息
                </a>
                <a href="tasks.html" class="bg-primary/10 text-primary block pl-3 pr-4 py-2 border-l-4 border-primary text-base font-medium">
                    任务
                </a>
                <a href="settings-profile.html" class="text-gray-500 hover:bg-gray-50 hover:text-primary hover:border-primary block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">
                    设置
                </a>
            </div>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- 页面标题和操作区 -->
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
            <div>
                <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold">任务管理</h1>
                <p class="text-gray-500 mt-1">管理您的所有任务和待办事项</p>
            </div>
            <button id="add-task-btn" class="mt-4 md:mt-0 bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-lg transition-custom shadow-lg shadow-primary/20 hover:shadow-xl hover:shadow-primary/30">
                <i class="fa fa-plus mr-2"></i> 添加任务
            </button>
        </div>
        
        <!-- 任务统计卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <!-- 待办任务 -->
            <div class="bg-white rounded-xl shadow-sm p-6 task-card-hover border-l-4 border-danger">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-500 font-medium">待办任务</p>
                        <h3 class="text-3xl font-bold mt-2" id="pending-count">8</h3>
                        <p class="text-danger text-sm mt-3 flex items-center">
                            <i class="fa fa-arrow-up mr-1"></i> 较上周增加 2 项
                        </p>
                    </div>
                    <div class="bg-danger/10 p-3 rounded-lg">
                        <i class="fa fa-clipboard text-danger text-xl"></i>
                    </div>
                </div>
            </div>
            
            <!-- 进行中任务 -->
            <div class="bg-white rounded-xl shadow-sm p-6 task-card-hover border-l-4 border-warning">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-500 font-medium">进行中任务</p>
                        <h3 class="text-3xl font-bold mt-2" id="in-progress-count">5</h3>
                        <p class="text-warning text-sm mt-3 flex items-center">
                            <i class="fa fa-minus mr-1"></i> 与上周持平
                        </p>
                    </div>
                    <div class="bg-warning/10 p-3 rounded-lg">
                        <i class="fa fa-spinner text-warning text-xl"></i>
                    </div>
                </div>
            </div>
            
            <!-- 已完成任务 -->
            <div class="bg-white rounded-xl shadow-sm p-6 task-card-hover border-l-4 border-success">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-500 font-medium">已完成任务</p>
                        <h3 class="text-3xl font-bold mt-2" id="completed-count">12</h3>
                        <p class="text-success text-sm mt-3 flex items-center">
                            <i class="fa fa-arrow-up mr-1"></i> 较上周增加 4 项
                        </p>
                    </div>
                    <div class="bg-success/10 p-3 rounded-lg">
                        <i class="fa fa-check-square-o text-success text-xl"></i>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 任务筛选和搜索 -->
        <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
            <div class="flex flex-col md:flex-row gap-4">
                <div class="flex flex-wrap gap-2">
                    <button class="bg-primary text-white px-4 py-2 rounded-lg text-sm font-medium filter-btn" data-filter="all">
                        全部任务
                    </button>
                    <button class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium transition-colors filter-btn" data-filter="pending">
                        待办
                    </button>
                    <button class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium transition-colors filter-btn" data-filter="in-progress">
                        进行中
                    </button>
                    <button class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium transition-colors filter-btn" data-filter="completed">
                        已完成
                    </button>
                </div>
                <div class="relative flex-grow md:max-w-md">
                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                        <i class="fa fa-search"></i>
                    </span>
                    <input type="text" id="task-search" placeholder="搜索任务..." 
                           class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom text-sm">
                </div>
            </div>
        </div>
        
        <!-- 任务列表 -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <div class="p-6 border-b border-gray-100">
                <h2 class="font-bold text-lg">任务列表</h2>
            </div>
            
            <div id="task-list" class="divide-y divide-gray-100">
                <!-- 任务项将通过JavaScript动态生成 -->
            </div>
            
            <!-- 分页 -->
           <div class="p-6 border-t border-gray-100 flex justify-between items-center flex-wrap gap-4">
             <p class="text-sm text-gray-500">
                显示 <span id="start-range">1</span> 到 <span id="end-range">5</span> 条，共 <span id="total-count">25</span> 条
            </p>
            <div class="flex space-x-1" id="pagination-controls">
            <!-- 上一页按钮 -->
            <button class="px-3 py-1 rounded border border-gray-300 bg-white text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" id="prev-page">
            <i class="fa fa-chevron-left"></i>
            </button>
             <!-- 页码按钮将通过JavaScript动态生成 -->
             <!-- 下一页按钮（新增，独立于页码） -->
             <button class="px-3 py-1 rounded border border-gray-300 bg-white text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" id="next-page">
            <i class="fa fa-chevron-right"></i>
        </button>
    </div>
</div>
        </div>
    </main>

    <!-- 添加/编辑任务模态框 (默认隐藏) -->
    <div id="task-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-xl shadow-xl w-full max-w-lg mx-4 transform transition-all">
            <div class="p-6 border-b border-gray-100 flex justify-between items-center">
                <h3 class="text-lg font-bold" id="modal-title">添加新任务</h3>
                <button id="close-modal" class="text-gray-400 hover:text-gray-500">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="p-6">
                <form id="task-form" class="space-y-4">
                    <input type="hidden" id="task-id">
                    
                    <div>
                        <label for="task-title-input" class="block text-sm font-medium text-gray-700 mb-1">任务标题</label>
                        <input type="text" id="task-title-input" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" placeholder="请输入任务标题" required>
                    </div>
                    
                    <div>
                        <label for="task-priority-select" class="block text-sm font-medium text-gray-700 mb-1">优先级</label>
                        <select id="task-priority-select" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                            <option value="low">普通</option>
                            <option value="medium">中等</option>
                            <option value="high">紧急</option>
                        </select>
                    </div>
                    
                    <div>
                        <label for="task-status-select" class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                        <select id="task-status-select" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                            <option value="pending">待办</option>
                            <option value="in-progress">进行中</option>
                            <option value="completed">已完成</option>
                        </select>
                    </div>
                    
                    <div id="progress-container" class="hidden">
                        <label for="task-progress-input" class="block text-sm font-medium text-gray-700 mb-1">完成进度 (%)</label>
                        <input type="range" id="task-progress-input" min="10" max="90" step="10" value="50"
                               class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
                        <div class="flex justify-between text-xs text-gray-500 mt-1">
                            <span>10%</span>
                            <span id="progress-value">50%</span>
                            <span>90%</span>
                        </div>
                    </div>
                    
                    <div>
                        <label for="task-deadline-input" class="block text-sm font-medium text-gray-700 mb-1">截止日期</label>
                        <input type="date" id="task-deadline-input" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" required>
                    </div>
                    
                    <div>
                        <label for="task-description-input" class="block text-sm font-medium text-gray-700 mb-1">任务描述</label>
                        <textarea id="task-description-input" rows="3" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" placeholder="请输入任务描述"></textarea>
                    </div>
                </form>
            </div>
            <div class="p-6 border-t border-gray-100 flex justify-end space-x-3">
                <button id="cancel-task" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                    取消
                </button>
                <button id="save-task" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                    保存任务
                </button>
            </div>
        </div>
    </div>

    <!-- 确认删除模态框 (默认隐藏) -->
    <div id="delete-confirm-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4 p-6">
            <div class="text-center mb-4">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-danger/10 text-danger mb-4">
                    <i class="fa fa-trash text-2xl"></i>
                </div>
                <h3 class="text-lg font-bold">确认删除</h3>
                <p class="text-gray-500 mt-2">您确定要删除这个任务吗？此操作无法撤销。</p>
            </div>
            <div class="flex space-x-3">
                <button id="cancel-delete" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                    取消
                </button>
                <button id="confirm-delete" class="flex-1 px-4 py-2 bg-danger text-white rounded-lg hover:bg-danger/90 transition-colors">
                    确认删除
                </button>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-8 mt-auto">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="flex items-center mb-4 md:mb-0">
                    <i class="fa fa-connectdevelop text-primary text-xl mr-2"></i>
                    <span class="font-bold text-lg text-primary">UserHub</span>
                </div>
                <div class="flex space-x-6">
                <a href="https://weixin.qq.com" class="text-gray-400 hover:text-primary transition-colors duration-200" title="微信">
                        <i class="fa fa-weixin text-xl"></i>
                    </a>
                    <a href="https://im.qq.com/index" class="text-gray-400 hover:text-primary transition-colors duration-200" title="QQ">
                        <i class="fa fa-qq text-xl"></i>
                    </a>
                    <a href="https://weibo.com/newlogin?tabtype=weibo&gid=102803&openLoginLayer=0&url=https%3A%2F%2Fweibo.com%2F" class="text-gray-400 hover:text-primary transition-colors duration-200" title="微博">
                        <i class="fa fa-weibo text-xl"></i>
                    </a>
                </div>
            </div>
            <div class="mt-6 border-t border-gray-200 pt-6 flex flex-col md:flex-row justify-between items-center">
                <p class="text-sm text-gray-500">
                    &copy; 2025 UserHub. 保留所有权利.
                </p>
                <div class="mt-4 md:mt-0 flex space-x-6">
                    <a href="privacy-policy.html" class="text-sm text-gray-500 hover:text-primary transition-colors duration-200">隐私政策</a>
                    <a href="terms-of-service.html" class="text-sm text-gray-500 hover:text-primary transition-colors duration-200">使用条款</a>
                    <a href="help-center.html" class="text-sm text-gray-500 hover:text-primary transition-colors duration-200">帮助中心</a>
                </div>
            </div>
        </div>
    </footer>
        <!-- 引入自定义JS -->
    <script src="tasks.js"></script>
</body>
</html>